import { PureComponent } from 'react'
import SingleTable from 'components/table/index'
import { Input, Button, Select } from 'antd'
import CouponModal from 'components/modal/couponModal'
import styles from './couponManagement.less'
const { Option } = Select
export default class CouponManagement extends PureComponent {
    state = {
        visible: false
    }
    renderModal(){
        const { visible } = this.state
        return(
            <CouponModal 
                visible={visible}
                onOk={this.handleOK}
                onCancel={this.handleCancel}
            />
        )
    }
    handleCancel = () => {
        this.setState({ visible: false })
    }
    handleOK = () => {
        this.setState({ visible: false })
    }
    handleAdd = () => {
        this.setState({ visible: true })
    }
    render(){
        const columns = [
            {
                key: 'gmtCreate',
                title: '买家账号',
                dataIndex: 'gmtCreate',
                align: 'center',
            },
            {
                key: 'operationTypeName',
                title: '生效时间',
                dataIndex: 'operationTypeName',
                align: 'center',
            },
            {
                key: 'creatorName',
                title: '失效时间',
                dataIndex: 'creatorName',
                align: 'center',
            },
            {
                key: '4',
                title: '折扣',
                dataIndex: 'creatorName',
                align: 'center',
            },
            {
              key: '5',
              title: '优惠券类型',
              dataIndex: 'creatorName',
              align: 'center',
            },
            {
              key: '6',
              title: '支付方式',
              dataIndex: 'creatorName',
              align: 'center',
            },
            {
                key: '7',
                title: '获得来源',
                dataIndex: 'creatorName',
                align: 'center',
            },
            {
                key: '8',
                title: '创建时间',
                dataIndex: 'creatorName',
                align: 'center',
            },
          ]
          const dataList = []
        return(
            <div className={styles.couponManagement}>
                <div className={styles.couponManagementBox}>
                    <h2>优惠券管理</h2>
                </div>
                <div className={styles.couponManagementSearch}>
                    <div className={styles.couponManagementSin}>
                        <span className={styles.couponManagementSpan}>会员号：</span>
                        <Input className={styles.couponManagementInput}/>
                    </div>
                    <div className={styles.couponManagementSin} style={{margin: '0 28px'}}>
                        <span className={styles.couponManagementSpan}>是否已使用：</span>
                        <Select className={styles.couponManagementInput}>
                            <Option value="value">value</Option>
                        </Select>
                    </div>
                    <div className={styles.couponManagementSin}>
                        <span className={styles.couponManagementSpan}>优惠券类型：</span>
                        <Select className={styles.couponManagementInput}>
                            <Option value="value">value</Option>
                        </Select>
                    </div>
                    <div className={styles.couponManagementSin} style={{marginLeft: '28px'}}>
                        <span className={styles.couponManagementSpan}>支付类型：</span>
                        <Select className={styles.couponManagementInput}>
                            <Option value="value">value</Option>
                        </Select>
                    </div>
                </div>
                <Button type="primary" icon="search" style={{margin: '0 0 24px 24px'}}>查询</Button>
                <Button icon="plus" style={{marginLeft: '24px'}} onClick={this.handleAdd}>优惠券派发</Button>
                <div className={styles.couponManagementTable}>
                    <SingleTable
                        data={{ list: dataList }}
                        columns={columns}
                    />
                </div>
                {this.renderModal()}
            </div>
        )
    }
}